<template>
  <div class="pixel-warp">
    <div class="pixel-panel" ref="pixelPanelRef">
      <div class="pixel-line" v-for="x in panleRowNum">
        <game-PixelPoint
            v-for="y in panleColNum"
            :select="!!pixelSelectMap[x + '_' + y]"
            :my="pixelSelectMap[x + '_' + y]?.isMy || false"
            :selectColor="pixelSelectMap[x + '_' + y]?.isMy ? gameStore.selectColor : (pixelSelectMap[x + '_' + y]?.selectColor || '')"
            :backgroundColor="pixelPanleColor[x+'_'+y]?.color || '#fff'"
            :width="gameStore.pixelWidth"
            :height="gameStore.pixelHeight"
            @click="pointCick(x,y,true)"
            @dblclick="pixelSetColor(x,y,gameStore.selectColor)"
        />
      </div>
      <!--      <div class="pixel-line" v-for="(item,index) in pixelDefData">
              <game-PixelPoint
                  v-for="(rowItem ,rowIndex) in item"
                  :select="!!pixelSelectMap[rowItem.x + '_' + rowItem.y]"
                  :my="!!pixelSelectMap[rowItem.x + '_' + rowItem.y] && pixelSelectMap[rowItem.x + '_' + rowItem.y].isMy"
                  :selectColor="!!pixelSelectMap[rowItem.x + '_' + rowItem.y] ? (pixelSelectMap[rowItem.x + '_' + rowItem.y].isMy ? gameStore.selectColor : pixelSelectMap[rowItem.x + '_' + rowItem.y].selectColor) : ''"
                  :backgroundColor="rowItem.color || '#fff'"
                  :width="gameStore.pixelWidth"
                  :height="gameStore.pixelHeight"
                  @click="pointCick(rowItem)"
                  @dblclick="pixelSetColor(rowItem.x,rowItem.y,gameStore.selectColor)"
              />
            </div>-->
    </div>
    <game-PixelCtrl v-model:carouseIndex="carouseIndex"/>
  </div>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import {useGameStore} from "../../store";
import pointColorData from "../../assets/data/pointColorData"
import {debounce} from "../../utils";
import {CtrlColor, Pixel} from "../../types/index";

let props = defineProps<{}>();
let gameStore = useGameStore();

let pixelPanleColor = ref({});
let pixelSelectMap = ref({});
let curSelectPixel = ref({});
let carouseIndex = ref(0);

let pixelPanelRef = ref(null);
let panleColNum = computed(() => {
  if (!pixelPanelRef.value) return 0;
  let w = pixelPanelRef.value.clientWidth;
  return parseInt(w / gameStore.pixelWidth);
})
let panleRowNum = computed(() => {
  if (!pixelPanelRef.value) return 0;
  let h = pixelPanelRef.value.clientHeight;
  return parseInt(h / gameStore.pixelHeight);
})
let pointCick = (x, y, isSetColor) => {
  let key = x + `_` + y;
  let pixelSelectNode = pixelSelectMap.value[key];
  let isMe = curSelectPixel.value.x == x && curSelectPixel.value.y == y;
  if (isMe) {
    return;
  }
  if (pixelSelectMap.value[key]) {
    //TODO:如果当前节点存在值，则认为当前节点是选中状态，这里需要考虑多个人同时选中同一个节点
    delete pixelSelectMap.value[key];
  }
  if (curSelectPixel.value) {
    let {x, y} = curSelectPixel.value;
    delete pixelSelectMap.value[x + '_' + y];
  }
  pixelSelectMap.value[key] = {selectColor: gameStore.selectColor, isMy: true};
  curSelectPixel.value = pixelPanleColor.value[key] || {x, y}
  //上色
  isSetColor && pixelSetColor(x, y, gameStore.selectColor)
}
//像素被点击（选中像素）
let pixelKeydown = (keyCode) => {
  let {x, y} = curSelectPixel.value;
  switch (keyCode) {
    case 38://上
      x--;
      break;
    case 39://右
      y++;
      break;
    case 40://下
      x++
      break;
    case 37://左
      y--
      break;
  }
  //TODO:此处需要做队列限速
  pointCick(x, y)
}
//像素上色
let pixelSetColor = (x: number, y: number, color: string) => {
  let key = x + '_' + y;
  if (!pixelPanleColor.value[key]) {
    pixelPanleColor.value[key] = {x, y, color}
  } else {
    pixelPanleColor.value[key].color = color;
  }
}
//初始化数据
let initData = () => {
  for (let item of pointColorData) pixelPanleColor.value[`${item.x}_${item.y}`] = item

  let colorList = [{
    color: '#ccc', keyCode: 49, name: 'cs', keyName: '1'
  }, {
    color: '#ff00ff', keyCode: 50, name: 'cs', keyName: '2'
  }, {
    color: '#ff0', keyCode: 51, name: 'cs', keyName: '3'
  }, {
    color: '#f00', keyCode: 52, name: 'cs', keyName: '4'
  }, {
    color: '#001', keyCode: 53, name: 'cs', keyName: '5'
  }, {
    color: '#002', keyCode: 54, name: 'cs', keyName: '6'
  }, {
    color: '#003', keyCode: 55, name: 'cs', keyName: '7'
  }, {
    color: '#004', keyCode: 56, name: 'cs', keyName: '8'
  }, {
    color: '#005', keyCode: 57, name: 'cs', keyName: '9'
  }, {
    color: '#006', keyCode: 58, name: 'cs', keyName: '0'
  }, {
    color: '#006', keyCode: 58, name: 'cs', keyName: '0'
  }, {
    color: '#006', keyCode: 58, name: 'cs', keyName: '0'
  }, {
    color: '#006', keyCode: 58, name: 'cs', keyName: '0'
  }];
  gameStore.setColorList(colorList)
}
onMounted(() => {
  initData();
  //键盘事件
  document.addEventListener('keydown', (e) => {
    let {keyCode} = e;
    if (keyCode >= 37 && keyCode <= 40) {
      pixelKeydown(keyCode);
    } else if (keyCode == 32) {
      //空格键 ：上色
      for (let key in pixelSelectMap.value) {
        let item = pixelSelectMap.value[key];
        if (item.isMy) {
          let xy = key.split("_");
          pixelSetColor(xy[0], xy[1], gameStore.selectColor);
          break;
        }
      }
    } else {
      let index = gameStore.setColorSelect(keyCode);
      if (index == -1) return;
      carouseIndex.value = parseInt(index / 10);
      //选好之后直接上色
      let {x, y} = curSelectPixel.value;
      if (x != undefined && y != undefined) {
        pixelSetColor(x, y, gameStore.selectColor);
      }
      e.stopPropagation();
      e.preventDefault()
    }
  });
})
</script>
<style scoped lang="scss">

</style>
